/******************************************************************************************
 * Import
 ******************************************************************************************/

// module
import Taro, { Component } from '@tarojs/taro'
import { AtSearchBar, AtInput } from 'taro-ui'
import { Input } from '@tarojs/components'

// project
import { CPage, CContent, CHeader, CFooter, CFloat, CAround, CBetween, CCenter, CRow, CColumn, CWrap, CLine, CHand, CItemX, CItemY, CText, CLabel, CSvg, CImage, CButton } from '../../../library/comp';
import { Base64, Gen, Time, Zip, Session, Storage, Http } from '../../../library/func';
import Icon from '../../../project/style/icon';
import SalesList from '../../../project/comp/salesList/Proj_Vip_Sales_List';
import DoHttp from '../../../project/func/http/http';

/******************************************************************************************
 * Export Class
 ******************************************************************************************/

export default class Index extends Component {

	/*------------------------------------------------------------------------------------
	 * 初始化
	 *-----------------------------------------------------------------------------------*/
	constructor(props) {
		super(props);

		/**
		 * state
		 */
		this.state = {
			data:{
				order:[
					
				],
			},
			
			type:'month',
			search:'',
			selectState: ['全部', '已退款', '未退款'],
			stateActive:'全部',
			selectPayment:['订单支付日期','订单结算日期'],
			paymentActive:'订单支付日期',
			dateStartActive:'开始日期',
			dateEndActive:'结束日期',
		}
	}

	/*------------------------------------------------------------------------------------
	 * 生命周期
	 *-----------------------------------------------------------------------------------*/
	// willMount
	componentWillMount() {
		// this.setState({
		// 	type:this.$router.params.type
		// })
	}
	// didMount
	componentDidMount() {
		this.getHttp();
	}
	
	/*------------------------------------------------------------------------------------
	 * 事件处理
	 *-----------------------------------------------------------------------------------*/
	// 接口 获取数据
	getHttp = () => {
		let start = this.state.dateStartActive;
		let end = this.state.dateEndActive;
		let search = this.state.search.replace(/\s*/g,'');
		let data={
			type:this.state.type,
			status:this.state.selectState.indexOf(this.state.stateActive),
			datetype:this.state.selectPayment.indexOf(this.state.paymentActive),
		};
		if(isNaN(start) && !isNaN(Date.parse(start))){
			
			data.timestart = Date.parse(start)/1000
			console.log('timestart||timestart',start)
		}
		if(isNaN(end) && !isNaN(Date.parse(end))){
			
			data.timeend = Date.parse(end)/1000
			console.log('timeend||timeend',end)
		}
		if(search){
			
			data.orderid = search
			console.log('search||search',search)
		}
		
		DoHttp.get({
			url:'vip/fansOrder.php',
			data:data,
			success:(data) => {
				this.setState({
					data:data
				})
			},
			error:(err) => {
				console.log('err=============>',err)
			}
		})
	}
    // onRedirect
    onRedirect = (url, e)=> {
        wx.redirectTo({
            url: url
        })
		console.log(123)
    }
    // onNavigate
    searchChange = (value)=> {
		this.setState({
			search:value.detail.value
		})
    }

	/*------------------------------------------------------------------------------------
	 * 自定义方法
	 *-----------------------------------------------------------------------------------*/
	// 查询
	tosearch = () => {
		this.getHttp()	
	}
	// picker 全部、已退款、未退款
	onStateSelect = e => {
		// this.setState({
		// 	stateActive: this.state.selectState[e.detail.value]
		// })
		this.setState( prevState => ({
			stateActive: prevState.selectState[e.detail.value]
		}),()=>{
			console.log('e.detail.value',e.detail.value)
			console.log('this.state.selectState[e.detail.value]',this.state.selectState[e.detail.value])
			console.log(this.state.stateActive)
			this.getHttp()	
		})
		
	}
	// picker 订单支付日期 订单结算日期
	onPayment = e => {
		this.setState({
			paymentActive: this.state.selectPayment[e.detail.value]
		})
		console.log(this.state.paymentActive)
		this.getHttp()	
	}
	// picker 开始日期
	onChangeDateStar= e => {
		this.setState({
			dateStartActive:e.detail.value
		})
		console.log(this.state.dateStartActive)
		console.log('e.detail.value||e.detail.value',e.detail.value)
		this.getHttp()	
	}
	// picker 结束日期
	onChangeDateEnd= e => {
		this.setState({
			dateEndActive: e.detail.value
		})
		console.log(this.state.dateEndActive)
		this.getHttp()	
	}

	/*------------------------------------------------------------------------------------
	 * 渲染
	 *-----------------------------------------------------------------------------------*/
	render () {
		return (
			<CPage>
				<CContent bg='#f2f2f2'>
					
					{/* 累计预收入 总计概览 */}
					<CColumn bg='#1e1e1e' h='380' rb='100' oh x='center' pt='52' mb='20'>
						<CHand size='80' color='#ead494' mb='13'>{this.state.data.commission}</CHand>
						<CHand color='#797979' mb='10' size='24'>累计预收入</CHand>
						<CHand color='#797979' mb='30' size='24'>退款，不结算佣金</CHand>
						<CBetween px='50' mt='30'>
							<CLine x='center'>
								<CItemY>
									<CHand color='#ead494' size='28'>销售佣金</CHand>
									<CHand color='#ead494' size='32' bold mb='10'>{this.state.data.commission}</CHand>
									<CHand w='70' h='2' bg='#ead494'></CHand>
								</CItemY>
							</CLine>
							<CLine x='center'>
								<CItemY>
									<CHand> </CHand>
									<CHand h='44' w='1' bg='#797979'></CHand>
									<CHand> </CHand>
								</CItemY>
							</CLine>
							<CLine x='center'>
								<CItemY>
									<CHand color='#797979' size='28'>培训津贴</CHand>
									<CHand color='#797979' size='32' bold>0.00</CHand>
									<CHand></CHand>
								</CItemY>
							</CLine>
						</CBetween>
					</CColumn>

					{/* 过滤器 */}
					<CAround px='20' mb='20' >
						<Picker mode='selector' range={this.state.selectState} onChange={this.onStateSelect}>
							<CLine py='20' pl='16' pr='5' bg='#fff' y='center' ra='6'>
								<CHand mr='6' size='24' >{this.state.stateActive}</CHand>
								<CSvg w='20' h='20' icon={Icon.down} />
							</CLine>
						</Picker>
						<Picker mode='selector' range={this.state.selectPayment} onChange={this.onPayment}>
							<CLine px='10' py='20' bg='#fff' y='center' mx='15' ra='6'>
								<CHand size='24' >{this.state.paymentActive}</CHand>
								<CSvg w='20' h='20' icon={Icon.down} />
							</CLine>
						</Picker>
						<CLine pa='10' bg='#fff' y='center' ra='6'>
							<Picker mode='date' onChange={this.onChangeDateStar}>
								<CHand mr='6' size='24' >{this.state.dateStartActive}</CHand>
							</Picker>
							<CHand >/</CHand>
							<Picker mode='date' onChange={this.onChangeDateEnd}>
								<CHand ml='6' size='24' >{this.state.dateEndActive}</CHand>
							</Picker>
						</CLine>
					</CAround>

					{/* 搜索框 */}
					<CBetween mb='20' px='20'>
						<CItemX y='center' bg='#fff' px='20' h='70' w='500' ra='6'>
							<CSvg w='52' h='52' color='#686868' mr='16' icon={Icon.search} />
							<Input
								style='font-size:14px;'
								placeholder='请输入订单号查询'
								value={this.state.search}
								onInput={this.searchChange}
							/>
						</CItemX>
						<CButton bg='#dcbe76' color='#9e7939' w='150' h='70' y='center' ra='8' style='font-size:30rpx' onClick={this.tosearch} >查询</CButton>
					</CBetween>

					{/* 订单列表 */}
					<CColumn px='10'>
						{
							this.state.data.order.map( item => {
								return (
									<SalesList class='w1' data={{
										id: item.id,
										img: item.object.set_order_image,
										name: item.object.set_order_name,
										price: item.set_amount,
										prediction:item.set_commission,
										time: item.time_submit,
										order:item.set_orderid,
										fkuid:item.fk_uid
									}}></SalesList>
								)
							})
						}
						{this.state.data.order.length == 0 && <CRow x='center' mt='80' size='28' color='#686868'>暂无订单记录</CRow>}
					</CColumn>
				</CContent>
			</CPage>
		)
	}
}


